<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>天山商城首页</title>

    <!--获取屏幕宽度，根据屏幕宽度进行自适应-->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!--引入bootStrap-->
    <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css"/>

    <!--bootstrap 依赖jQuery-->
    <script src="js/jquery-3.5.0.min.js"></script>
    <script src="bootstrap-3.3.7/js/bootstrap.min.js"></script>
    <script src="js/http.js"></script>
</head>
<body>
<script src="js/header.js">
</script>
<div class="container">
<!--    <div class="row">-->
<!--        <div class="jumbotron">-->
<!--            <h1>欢迎来到天山商城</h1>-->
<!--            <p>多 快 好 省！</p>-->
<!--            <p><a class="btn btn-primary btn-lg" href="#" role="button">开始购物吧</a></p>-->
<!--        </div>-->
<!--    </div>-->
    <div class="row" id="div_goods_id">

    </div>
</div>

<template id="template_goods_info">
    <div class="col-xs-2">
        <div class="thumbnail">
            <img src="{{imgUrl}}" alt="...">
            <div class="caption">
                <h3>{{remark}}</h3>
                <p>{{price}}  元</p>
                <p>商品型号：  {{goodsCode}}</p>
                <p>  类型号：  {{typeId}}</p>

            </div>
        </div>
    </div>
</template>
</body>
</html>

<script>

    $(function () {
        init();
    });

    function init() {
        //显示商品详情
        refreshGoodsId();
        //显示用户信息
        showUserInfo();
    }

    function showUserInfo() {
        //从浏览器缓存中获取用户信息
        let userJson = localStorage.getItem("userInfo");
        //显示
    }

    function refreshGoodsId() {
        let url = decodeURI(window.location.href);
        console.log(url);
        let argsIndex = url .split("?id=");
        let arg = argsIndex[1];

        console.log(arg);

        //发起ajax http请求获取到商品列表数据
        httpPostWithParams("/goodsId", {arg:arg}, showGoodsId);

        // $.ajax({
        //     type: "get",
        //     url: "http://localhost:8081/shop-api/goodsList",
        //     success: function (resp) {
        //         console.log(resp);
        //         //json 装换为js对象
        //         let result = JSON.parse(resp);
        //         console.log("result");
        //         console.log(result);
        //         //业务状态码判断
        //         if (result.status == 0) {
        //             //业务处理成功
        //             let goodsList = result.data;
        //             //具体业务处理
        //             console.log(result);
        //             showGoodsList(goodsList);
        //         } else {
        //             //业务处理失败
        //             alert(result.msg);
        //         }
        //     }
        // });

        //遍历渲染商品列表到页面
        function showGoodsId(dbgood) {
            //业务内容清空
            $("#div_goods_id").html("");

            //获取模板标签
            let goodsTemplate = $("#template_goods_info").html();

            let replaceAll = goodsTemplate.replaceAll("{{imgUrl}}", dbgood.imgUrl)
                        .replaceAll("{{remark}}", dbgood.remark)
                        .replaceAll("{{price}}", dbgood.price)
                        .replaceAll("{{goodsCode}}", dbgood.goodsCode)
                        .replaceAll("{{typeId}}", dbgood.typeId);
            console.log(replaceAll)
            $("#div_goods_id").html(replaceAll);


            // if(!goodsId){
            //     return;
            // }
            //     goodsId.forEach(goods => {
            //         //替换模板标签内容
            //         let goodsHtml = goodsTemplate
            //             .replaceAll("{{imgUrl}}", goods.imgUrl)
            //             .replaceAll("{{remark}}", goods.remark)
            //             .replaceAll("{{price}}", goods.price)
            //             .replaceAll("{{goodsCode}}", goods.goodsCode)
            //             .replaceAll("{{price}}", goods.typeId)
            //         //拼接HTML
            //         goodsIdHtml += goodsHtml;
            //     })
            //
            //     //填充html到指定位置
            //     $("#div_goods_Id").html(goodsIdHtml);
            //
            //     console.log(goods);
            }
    }

</script>